<template>
  <div style="margin-top: 15px; margin-left: 15px">
    <el-row>
      <el-col :span="24">
        <div>
          <el-button
            type="primary"
            plain
            size="small"
            icon="el-icon-plus"
            style="margin-bottom: 15px"
            @click="insertMenu"
            >新增菜单</el-button
          >
          <el-table
            v-loading="loading"
            :data="tableData"
            style="width: 100%; margin-bottom: 20px"
            row-key="menuId"
            border
            :default-expand-all="false"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
          >
            <el-table-column prop="menuName" label="菜单名称" width="180" align="center" />

            <el-table-column prop="icon" label="图标" align="center" width="100">
              <template slot-scope="scope">
                <!-- <svg-icon :icon-class="" /> -->
                <i :class="scope.row.icon" />
              </template>
            </el-table-column>

            <el-table-column prop="orderNum" label="排序" width="60" align="center" />
            <el-table-column prop="menuType" label="菜单类型" width="180" align="center">
              <template slot-scope="scope">
                {{
                  scope.row.menuType === 'M'
                    ? '目录'
                    : scope.row.menuType === 'C'
                    ? '菜单'
                    : scope.row.menuType === 'F'
                    ? '按钮'
                    : ''
                }}
              </template>
            </el-table-column>
            <el-table-column prop="perms" label="权限标识" width="230" align="center" />
            <el-table-column prop="component" label="组件路径" width="230" align="center" />
            <el-table-column prop="status" label="状态" width="100" align="center">
              <template slot-scope="scope">
                {{ scope.row.status === false ? '正常' : '停用' }}
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button size="mini" type="warning" @click="handleEdit(scope.row.menuId)">编辑</el-button>
                <el-button size="mini" type="danger" @click="handleDelete(scope.row.menuId)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <MenuDialog :title="title" :menu-dialog-visible.sync="menuDialogVisible" @refreshList="refreshList" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import MenuDialog from '@/views/system/menu/components/MenuDialog'
  import { list, deleteByMenuId } from '@/api/menu'
  export default {
    components: {
      MenuDialog
    },
    data() {
      return {
        loading: false,
        tableData: [],
        title: '',
        menuDialogVisible: false
      }
    },
    created() {
      this.tableList({})
    },
    mounted() {
      // 监听来自其他组件的消息
      this.$bus.$on('searchMenu', data => {
        this.tableList(data)
      })
    },
    beforeDestroy() {
      // 在组件销毁前移除事件监听器以避免内存泄漏
      this.$bus.$off('searchMenu')
    },
    methods: {
      async tableList() {
        this.tableData = await list()
      },
      insertMenu() {
        this.title = '新增菜单'
        this.menuDialogVisible = true
      },
      /**
       * 刷新列表数据
       */
      refreshList() {
        this.tableList({})
      },
      /**
       * 删除菜单
       */
      handleDelete(menuId) {
        this.$confirm('此操作将永久删除该菜单, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(async () => {
            await deleteByMenuId(menuId)
            this.tableList({})
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      }
    }
  }
</script>

<style></style>
